<script setup lang="ts">
import gsap from 'gsap';
import { onMounted } from 'vue';

onMounted(() => {
  gsap.to(
    '.green',
    {
      duration: 4,
      x: '40vw',
      rotation: 360,
      backgroundColor: 'red',
      repeat: -1,
      ease: "bounce.out"
    }
  )
})

</script>

<template>
  <div>
    <div class="box green"></div>
    <div class="box red"></div>
    <div class="box purple"></div>
    <div>
      <svg width="500" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="50" x2="100" y2="50" stroke-width="5" stroke="black" />

        <!-- 如果不指定描边颜色，则无法看见线条 -->
      </svg>
    </div>
    <div>
      <svg width="400" height="200" viewBox="0 0 100 50">
        <!-- 这里的坐标系统是 100x50 的 -->
        <rect x="10" y="10" width="80" height="30" fill="blue" />
      </svg>
      <svg width="100" height="100" viewBox="50 50 100 100">
        <circle cx="100" cy="100" r="50" fill="red" />
      </svg>
    </div>
  </div>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  border-radius: 30px;
  margin-top: 10px;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.purple {
  background-color: purple;
}
</style>
